@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  color: #333;
  background-color: #F7F4F3;
}

.book-cover {
  height: 0;
  padding-bottom: 135.29%;
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}

.meta {
  font-size: 14px;

  > div {
    display: flex;
    margin-bottom: 8px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  dt {
    flex: 0 0 5.5em;
    font-weight: bold;
    cursor: default;
  }
  dd {
    color: #555;
  }
}

.search {
  .bd {
    position: relative;
    padding: 30px 0;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 120px;
      background-color: #e2d6bf;
    }
  }

  .group {
    position: relative;
    z-index: 1;
    display: flex;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }

    .label {
      padding: 0 30px;
      font-size: 14px;
      color: #333;
    }

    .values {
      flex: auto;
      display: flex;
      padding: 0 30px;

      .value {
        margin-right: 30px;
        font-size: 14px;
        color: #333;
        a {
          cursor: pointer;
        }

        &.active {
        @apply text-brand;
        }
      }
    }
  }
}

